<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script src="./scripts/checkLogin.js"></script>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">

    <!------------------------>
    <!-- Required meta tags -->
    <!------------------------>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!------------------------------------------>
    <!-- Bootstrap Library CSS JS CDN go here -->
    <!------------------------------------------>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-------------------------------------------------------->
    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <!-------------------------------------------------------->
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <!-------------------------------------------->
    <!-- Other libraries and styles of your own -->
    <!-------------------------------------------->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blue Ocean Environmental Protection - Protecting Marine Ecology</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <style>
        .carousel-item {
            height: 500px;
            background-size: cover;
            background-position: center;
        }
        .mission-card {
            border: 2px solid #0d6efd;
            transition: transform 0.3s;
        }
        .mission-card:hover {
            transform: translateY(-10px);
        }
        footer {
            background-color: #1a3650;
            color: white;
        }
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        
        .navbar {
            height: 60px;
            background-color: #2c3e50;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .footer {
            height: 60px;
            background-color: #2c3e50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 20px;
        }
        
        .main-content {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: calc(100vh - 120px); /* Subtract the nav and footer height */
        }
        
        .report-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 80%;
            max-width: 600px;
            margin: 0 auto;
        }
        
        h1 {
            color: #2c3e50;
        }
        
        .report-image {
            width: 100%;
            max-height: 300px;
            border-radius: 8px;
            margin: 20px 0;
            object-fit: cover;
        }
        
        .report-text {
            color: #333;
            line-height: 1.6;
            margin: 20px 0;
        }
        
        .highlight {
            font-weight: bold;
        }
    </style>
</head>
<body>

<!------------------------------>
    <!-- Your HTML Layout go here -->
    <!------------------------------>

    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

 <div class="report-container">
        <h1>Coastal Conservation Report</h1>
        
        <!-- Image Inserted Here -->
        <img src="./images/hong.jpg" alt="Coastal Conservation Image" class="report-image">
        
        <div class="report-text">
            <p>Over the past years, a series of coastal conservation projects have been successfully implemented. These include:</p>
            <ul>
                <li>A creation of <span class="highlight">coastal protective forests</span>,</li>
                <li>A restoration of <span class="highlight">coastal wetlands</span>,</li>
                <li>A protection of <span class="highlight">mangroves</span>,</li>
                <li>An improvement and restoration of <span class="highlight">shorelines</span>,</li>
                <li>A protection of <span class="highlight">islands</span>, and</li>
                <li>A comprehensive improvement of <span class="highlight">bays</span>.</li>
            </ul>
            <p>These efforts have resulted in the improvement of the ecological environment in certain local sea areas. The degradation trends of key habitats such as mangroves, coral reefs, seagrass beds, and salt marshes have been initially controlled. The ecological conditions of nearshore sea areas have generally shown a stable and improving trend.</p>
            <p>By the end of 2018, significant progress had been made with:</p>
            <ul>
                <li>Approximately <span class="highlight">1,000 kilometers</span> of shorelines restored,</li>
                <li>About <span class="highlight">9,600 hectares</span> of coastal wetlands restored, and</li>
                <li>A total of <span class="highlight">20 islands</span> protected.</li>
            </ul>
        </div>
    </div>
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>
 <!---------------------------------------------->
    <!-- Your own JavaScript functions go here    -->
    <!---------------------------------------------->
    <script src="./scripts/skeleton.js"></script>
    <!-- <script src="./scripts/script.js"></script> -->

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>